<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar title="推荐" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-notice-bar scrollable text="请选择合适的封面上传,文件过大可能招致上传失败!" />
    <van-form @submit="onSubmit" :model="form" style="text-align: center;">

      <van-uploader v-model="filePic" multiple :max-count="1" :after-read="afterRead" />
      <van-field v-model="form.name" name="电影名" label="电影名" placeholder="请填写电影名"
        :rules="[{ required: true, message: '必填!请填写电影名' }]" />
      <van-field v-model="form.director" name="导演" label="导演" placeholder="请填写导演"
        :rules="[{ required: true, message: '必填!请填写导演' }]" />
      <van-field v-model="form.actor" name="主演" label="主演" placeholder="请填写主演"
        :rules="[{ required: true, message: '必填!请填写主演' }]" />
      <van-radio-group v-model="form.type">
        <p>请选择上传类型</p>
        <van-radio name="dianying">电影</van-radio>
        <van-radio name="dianshi">电视</van-radio>
        <van-radio name="dongman">动漫</van-radio>
      </van-radio-group>
      <!-- 日期 -->
      <van-cell title="请选择出品时间" :value="date" @click="showdate = true" style="text-align: left;" />
      <van-calendar v-model="showdate" @confirm="onConfirm" :min-date="minDate" :max-date="maxDate" />

      <!-- 国家 -->
      <van-field v-model="form.country" is-link readonly label="出品地" placeholder="请选择出品地" @click="show = true"
        :rules="[{ required: true, message: '必选!请选择出品地' }]" />
      <van-popup v-model="show" round position="bottom">
        <van-cascader v-model="form.country" title="请选择出品地" :options="options" @close="show = false" @finish="onFinish" />
      </van-popup>
      <!-- 评分 -->
      <div class="star"><span>评分:</span><van-rate v-model="form.score" allow-half void-icon="star" color="#ffd21e"
          void-color="#eee" :count="10" /></div>

      <!-- 简介 -->
      <van-field v-model="form.cont" rows="5" autosize label="简介" type="textarea" maxlength="200" placeholder="请输入简介"
        show-word-limit :rules="[{ required: true, message: '必填!请填写简介内容' }]" />
      <!-- 推荐理由 -->
      <van-field v-model="form.tj_cont" rows="5" autosize label="个人推荐理由" type="textarea" maxlength="100"
        placeholder="请输入推荐理由" show-word-limit :rules="[{ required: true, message: '必填!请填写个人推荐理由' }]" />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" id="button">提交</van-button>
      </div>
    </van-form>

  </div>
</template>

<script>
import httpApi from '@/http';
import myaxios from "@/http/MyAxios"
import { mapMutations } from 'vuex'
import { Dialog } from 'vant';

export default {
  data() {
    return {

      date: '',
      showdate: false,
      show: false,
      cascaderValue: '',
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [],
      minDate: new Date(1970, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      // curentDate:new Data(),
      filePic: [],
      form: {
        director: '',//导演
        name: '',//名称
        imgs: '',//图片地址
        type: 'dianying',//类别
        actor: '',//主演
        showingon: '',//上映时间
        country: '',//国家
        score: 5,//评分:
        cont: '',//详情
        tj_cont: '',//推荐理由
        user: '',
      },
    }
  },

  methods: {
    ...mapMutations(['saveUser']),
    // 返回首页
    onClickLeft() {
      this.$router.push('/home/index')
    },

    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      this.show = false;
    },
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    // 时间
    onConfirm(date) {
      this.showdate = false;
      this.date = this.formatDate(date);
      this.form.showingon = this.formatDate(date);
    },
    changetime() {
      this.datetype(this.currentDate)
    },
    afterRead(file) {
      // console.log(file.file)
      var form = new FormData()
      form.append('avatar', file.file)
      // console.log(form.get("avatar"))
      //使用post上传，由于在vue使用post上传表单数据记得更改header
      myaxios.post1(form).then(res => {
        // console.log(res);
        this.form.imgs = res.data.data
        // console.log(this.form.imgs);
      })
    },
    onSubmit(values) {
      console.log(this.form);
      // 先判断 验证信息完整性
      if (this.form.imgs == '' || this.form.showingon == '') {
        Dialog.alert({
          title: '信息不完整',
          message: '请填写正确信息,并查看是否有漏项!',
        }).then(() => {
          // on close
        });
      } else {
        // 验证后发送请求
        let params = this.form
        httpApi.yinshiApi.upLoadForm(params).then(res => {
          console.log(res);
          if (res.data.data == 200) {
            Dialog.alert({
              title: '推荐成功,待审核',
              message: '请等待管理员审核,可在个人主页的推荐列表查看审核状态',
              theme: 'round-button',
            }).then(() => {
              // on close
              this.form.director = ''
              this.form.name = ''
              this.form.actor = ''
              this.form.showingon = ''
              this.form.country = ''
              this.form.cont = ''
              this.form.tj_cont = ''
              this.form.score = 5
            });
          }
        }).catch(err => {
          console.log(err);
        })
      }
    },
    // 获取国家名
    conuntryList() {
      let params = { page: 1, pagesize: 200 }
      httpApi.yinshiApi.queryCountry(params).then(res => {
        // 国家名数组
        this.options = res.data.data.result
        // console.log(this.options);
      }).catch(err => {
        console.log(err);
      })
    },

  },

  mounted() {
    this.conuntryList()
    // 判断是否登录用户
    if (this.$store.state.user) {
      this.form.user = this.$store.state.user.username
    } else {
      Dialog.confirm({
        title: '尚未登录',
        message: '亲!登录后才能上传哦!点击确认前往登录,点击取消返回',
      }).then(() => {
        this.$router.push('/login')

      })
        .catch(() => {
          this.$router.push('/home/index')

        });
    }
  },

}
</script>

<style lang="scss" scoped>
.van-form {
  padding-top: 8%;
}

.star {
  width: 100%;
  color: #646566;
  font-size: 14px;
  line-height: 24px;
  overflow: hidden;
  padding: 10px 16px;
  text-align: left;
}

.star>span {
  margin-right: 20px;
}

#app>div>form>div.van-radio-group {
  margin: 3% 0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;

}

#button {
  width: 100%;
}
</style>